﻿@{
    Layout = null;
    }
<style type="text/css">
    .divAlbum
    {
        float:left;
        height:140px;
         width:100px; 
         line-height:99px;
          border:1px solid #fff;
           border-radius:10px; 
           overflow:hidden; 
           cursor:pointer;      
           margin-right:1px;     
           text-align:center;
    }
    .divAlbum:hover {
       
    }
    .divChange
    {
        float:left;
         width:20px;
          height:5px;
           background-color:#e5e4e4;
            margin-right:10px; 
            cursor:pointer;
    }
    .divChangeCurr
    {        
           background-color:#669900;
            
    }
    .divAlbumInfo
    {
        margin:0px; text-align:center; height:15px; line-height:15px; text-overflow:ellipsis;overflow:hidden; white-space:nowrap;
      
    }
</style>
<div class="divLabel">
    <div>热门专辑</div>
</div>
<div style="height:140px; overflow:hidden; white-space:nowrap; padding-left:5px;">    
@foreach (var item in Model)
{
    int ID = @item.GetType().GetProperty("ID").GetValue(item, null);
    string albumName = item.GetType().GetProperty("AlbumName").GetValue(item, null);
    string artistName = item.GetType().GetProperty("ArtistName").GetValue(item, null);
    string imgUrl = item.GetType().GetProperty("ImgUrl").GetValue(item, null).ToString();
    int artistID = item.GetType().GetProperty("ArtistID").GetValue(item, null);
    <div style="display:none; width:110px; " class="divAlbum" >
           <div class="divAlbumShadow" style="border:1px solid #E7E7E7;cursor:pointer; line-height:98px; width:98px; border-radius:5px; overflow:hidden; text-align:center;"  title="@albumName/@artistName">
            <img style="max-height:100px; max-width:100px; vertical-align:middle;" onclick="javascript:window.location='/Home/AlbumSongs/@ID'"
                 src="/AlbumImg/@imgUrl" />
           </div>
         <div class="divAlbumInfo">@Html.ActionLink(albumName, "AlbumSongs", "Home", new { ID=ID}, null)</div>       
         <div class="divAlbumInfo">@Html.ActionLink(artistName, "SingerAlbums", "AACInfo", new { ID=artistID},null)</div>
    </div>   
}        
</div>
<div style="">
    <div style="margin:0 auto; width:100px;">
    <div class="divChange"></div>
    <div class="divChange"></div>
    <div class="divChange"></div>
        </div>
</div>
<script src="../../Scripts/jquery-1.4.4.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".divChange").eq(0).addClass("divChangeCurr");
        $(".divAlbum:lt(9)").show();
        var index = 0;
        $(".divChange").click(function () {
            $(".divChange").removeClass("divChangeCurr");
            $(this).addClass("divChangeCurr");
            index = $(".divChange").index($(this));
            funChange();
        });

        var funcSetin = function () {
            index++;
            
            if (index > 2)
            {
                index = 0;
            }         
            funChange();
        }

        var funChange = function () {
            $(".divChange").removeClass("divChangeCurr");
            $(".divChange").eq(index).addClass("divChangeCurr");
            var gt = index * 9;
            var lt = (index + 1) * 9;
            $(".divAlbum").hide();
            $(".divAlbum").slice(gt, lt).fadeIn(2000);
        }
        
        var hander = setInterval(funcSetin, 8000);
    });
</script>

